import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_icons/flutter_icons.dart';

class AccountPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _AccountPageState();
  }
}

class _AccountPageState extends State<AccountPage> {

  TextStyle _whiteColorStyle;
  var _fontSize = 17.0;
  var _panelIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if (_whiteColorStyle == null) _whiteColorStyle = Theme.of(context).textTheme.body2.copyWith(
      color: Colors.white.withOpacity(0.9),
    );

    var pages = <Widget>[
      _buildSignInPage(context),
      _buildSignUpPanbel(context),
    ];

    Widget buildingWidget = Scaffold(
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Stack(
            children: <Widget>[
              Positioned.fill(
                child: Image.asset("assets/images/baby-1.jpg", fit: BoxFit.cover,),
              ),
              Positioned.fill(
                  child: DefaultTextStyle(
                    style: _whiteColorStyle,
                    child: Container(
                      color: Colors.black.withOpacity(0.68),
                      child: Column(
                        children: <Widget>[
                          SizedBox(height: 40.0,),
                          Text(_panelIndex == 0 ? "كىرىش" : "تىزىملىتىش", style: _whiteColorStyle.copyWith(fontSize: _fontSize),),
                          Expanded(
                            child: Center(
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  Text("قوزىچاق", style: _whiteColorStyle.copyWith(fontSize: _fontSize),),
                                  Padding(
                                    padding: EdgeInsets.only(top: 30.0, bottom: 20.0),
                                    child: Text("قوزىڭىزنىڭ گۈزەل ئەسلىمىلىرىگە ھەمراھ بولۇڭ", style: _whiteColorStyle.copyWith(fontSize: 14.0),),
                                  ),
                                  pages[_panelIndex]
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
              ),
              Positioned(
                  left: 0.0,
                  right: 0.0,
                  bottom: 0.0,
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 20.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Container(
                              decoration: BoxDecoration(
                                color: Color(0xff1AAD81),
                                shape: BoxShape.circle,
                              ),
                              child: IconButton(
                                icon: Icon(FontAwesome.getIconData("wechat",), color: Colors.white,),
                                onPressed: (){},
                              ),
                            ),
                            SizedBox(width: 35.0,),
                            Container(
                              decoration: BoxDecoration(
                                color: Color(0xff1194C4),
                                shape: BoxShape.circle
                              ),
                              child: IconButton(
                                icon: Icon(FontAwesome.getIconData("qq"), color: Colors.white,),
                                onPressed: (){},
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 15.0,),
                        Text("ئەپكە تىزىملىتىپ ئىشلەتكىنىڭىز قوزىچاق ئەپ دېتالىنىڭ «ئىشلىتىش كىلىشىمى» ۋە «مەخپىيەتلىك ساقلاش كىلىشىمى» گە قوشۇلغانلىقىڭىزنى بىلدۈرىدۇ", style: _whiteColorStyle.copyWith(fontSize: 12.0,), textAlign: TextAlign.center,),
                        SizedBox(height: 10.0,)
                      ],
                    ),
                  )
              )
            ],
          ),
        ),
      )
    );
    buildingWidget = Directionality(
      textDirection: TextDirection.rtl,
      child: buildingWidget,
    );

    buildingWidget = IconTheme(
      child: buildingWidget,
      data: IconThemeData(
        opacity: 1.0
      ),
    );

    return buildingWidget;
  }

  Widget _buildSignUpPanbel(BuildContext context){

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          height: 250.0,
          color: Color(0xffFA87A8).withOpacity(0.75),
          padding: EdgeInsets.symmetric(horizontal: 25.0),
          alignment: Alignment.center,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  hintText: "يانفون نومۇرىڭىزنى كىرگۈزۈڭ",
                  hintStyle: TextStyle(color: Colors.white.withOpacity(0.5)),
                  border: InputBorder.none,
                  prefixIcon: Icon(Icons.phone_iphone, color: Colors.white.withOpacity(0.7),),
                ),
                style: _whiteColorStyle.copyWith(fontSize: 16.0, color: Colors.white),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15.0),
                child: Divider(color: Colors.white,),
              ),
              TextField(
                decoration: InputDecoration(
                    hintText: "مەخپىي نومۇرىڭىزنى كىرگۈزۈڭ",
                    hintStyle: TextStyle(color: Colors.white.withOpacity(0.5)),
                    border: InputBorder.none,
                    prefixIcon: Icon(Icons.vpn_key, color: Colors.white.withOpacity(0.7),)
                ),
                style: _whiteColorStyle.copyWith(fontSize: 16.0, color: Colors.white),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15.0),
                child: Divider(color: Colors.white,),
              ),
              TextField(
                decoration: InputDecoration(
                    hintText: "مەخپىي نومۇرنى يەنە بىر قېتىم كىرگۈزۈڭ",
                    hintStyle: TextStyle(color: Colors.white.withOpacity(0.5)),
                    border: InputBorder.none,
                    prefixIcon: Icon(Icons.vpn_key, color: Colors.white.withOpacity(0.7),)
                ),
                style: _whiteColorStyle.copyWith(fontSize: 16.0, color: Colors.white),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15.0),
                child: Divider(color: Colors.white,),
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: "دەلىللەش كودىنى كىرگۈزۈڭ",
                          hintStyle: TextStyle(color: Colors.white.withOpacity(0.5)),
                          border: InputBorder.none,
                          prefixIcon: Icon(Icons.vpn_key, color: Colors.white.withOpacity(0.7),)
                      ),
                      style: _whiteColorStyle.copyWith(fontSize: 16.0, color: Colors.white),
                    ),
                  ),
                  FlatButton(
                    child: Text("دەللەش كودىغا ئىرىشىش", style: _whiteColorStyle.copyWith(fontSize: 12.0),),
                    color: Color(0xffFFD62C),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0)
                    ),
                    onPressed: (){

                    },
                  )
                ],
              )
            ],
          ),
        ),
        Container(
          width: double.infinity,
          height: 45.0,
          margin: EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
          child: FlatButton(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0)
            ),
            child: Text("تىزىملىتىش", style: TextStyle(fontSize: _fontSize, color: Colors.white,)),
            color: Color(0xffFFD62C),
            onPressed: (){},
          ),
        ),
        Container(
          height: 45.0,
          width: double.infinity,
          margin: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
          child: FlatButton(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0),
                side: BorderSide(
                    color: Colors.white.withOpacity(0.7)
                )
            ),
            color: Colors.transparent,
            child: Text("كىرىش", style: TextStyle(fontSize: _fontSize, color: Colors.white),),
            onPressed: (){
              setState(() {
                _panelIndex = 0;
              });
            },
          ),
        )
      ],
    );
  }

  Widget _buildSignInPage(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          height: 149.0,
          color: Color(0xffFA87A8).withOpacity(0.75),
          padding: EdgeInsets.symmetric(horizontal: 40.0),
          alignment: Alignment.center,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  hintText: "يانفون نومۇرىڭىزنى كىرگۈزۈڭ",
                  hintStyle: TextStyle(color: Colors.white.withOpacity(0.5)),
                  border: InputBorder.none,
                  prefixIcon: Icon(Icons.phone_iphone, color: Colors.white.withOpacity(0.7),),
                ),
                style: _whiteColorStyle.copyWith(fontSize: 16.0, color: Colors.white),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15.0),
                child: Divider(color: Colors.white,),
              ),
              TextField(
                decoration: InputDecoration(
                    hintText: "مەخپىي نومۇرىڭىزنى كىرگۈزۈڭ",
                    hintStyle: TextStyle(color: Colors.white.withOpacity(0.5)),
                    border: InputBorder.none,
                    prefixIcon: Icon(Icons.vpn_key, color: Colors.white.withOpacity(0.7),)
                ),
                style: _whiteColorStyle.copyWith(fontSize: 16.0, color: Colors.white),
              ),
            ],
          ),
        ),
        Container(
          width: double.infinity,
          height: 45.0,
          margin: EdgeInsets.only(left: 30.0, right: 30.0, top: 55.0),
          child: FlatButton(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0)
            ),
            child: Text("كىرىش", style: TextStyle(fontSize: _fontSize, color: Colors.white,)),
            color: Color(0xffFA87A8),
            onPressed: (){},
          ),
        ),
        Container(
          height: 45.0,
          width: double.infinity,
          margin: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
          child: FlatButton(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0),
                side: BorderSide(
                    color: Colors.white.withOpacity(0.7)
                )
            ),
            color: Colors.transparent,
            child: Text("تىزىملىتىش", style: TextStyle(fontSize: _fontSize, color: Colors.white),),
            onPressed: (){
              setState(() {
                _panelIndex = 1;
              });
            },
          ),
        )
      ],
    );
  }
}
